import React from 'react';
import './item.less';
import Pubsub from 'pubsub-js';

let Item = React.createClass({

    playByItem(item){
        //console.log(item)
        Pubsub.publish('PLAY_MUSIC', item);
    },
    deleteByItem(item, e){
        e.stopPropagation();
        Pubsub.publish('DELETE_MUSIC', item);
    },
    render() {
        //console.log(this.props.focus)
        let item = this.props.item;
        return (
            <li className={`component-item row ${this.props.focus ? ' focus' :''}`}
                    onClick={this.playByItem.bind(this,item)}>
                <p><strong>{item.title}</strong> - {item.artist}</p>
                <p className="-col-auto delete" onClick={this.deleteByItem.bind(this,item)}></p>
            </li>
        );
    }
});

export default Item;